<template>
  <div class="login-box">
    <div class="login-logo">
      <!-- <svg-icon name="logo" :size="45" /> -->
      <!-- <img src="~@/assets/images/logo.png" width="45" /> -->
      <img :src="LoginLogo" width="320" />
      <!-- <h1 class="mb-0 ml-2 text-3xl font-bold">研课运营端</h1> -->
    </div>
    <a-form layout="horizontal" :model="loginFormModel" @submit.prevent="handleSubmit">
      <a-form-item>
        <a-input v-model:value="loginFormModel.username" size="large" placeholder="admin">
          <template #prefix><Icon icon="ant-design:user-outlined" /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="loginFormModel.password" size="large" type="password" placeholder="a123456" autocomplete="new-password">
          <template #prefix><Icon icon="ant-design:lock-outlined" /></template>
        </a-input>
      </a-form-item>
      <!-- <a-form-item>
        <a-input v-model:value="loginFormModel.verifyCode" placeholder="验证码" :maxlength="4" size="large">
          <template #prefix>
            <Icon icon="ant-design:safety-outlined" />
          </template>
          <template #suffix>
            <img :src="captcha" class="absolute right-0 h-full cursor-pointer" @click="updateCaptcha" />
          </template>
        </a-input>
      </a-form-item> -->
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="loading" block>登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue"
  import { useRoute, useRouter } from "vue-router"
  import { message, Modal } from "ant-design-vue"
  // import { Icon } from "@/components/basic/icon"
  import LoginLogo from "@/assets/login_logo@3x.png"
  import { useUserStore } from "@/stores/modules/user"
  // import Api from "@/api/"

  const route = useRoute()
  const router = useRouter()
  const userStore = useUserStore()

  const loading = ref(false)
  const captcha = ref("")
  const loginFormModel = ref({
    username: "admin",
    password: "a123456",
    verifyCode: "",
    captchaId: "",
  })

  // const updateCaptcha = async () => {
  //   const data = await Api.captcha.captchaCaptchaByImg({ width: 100, height: 50 })
  //   captcha.value = data.img
  //   loginFormModel.value.captchaId = data.id
  // }
  // updateCaptcha()

  function to<T, U = Error>(promise: Promise<T>, errorExt?: object): Promise<[U, undefined] | [null, T]> {
    return promise
      .then<[null, T]>((data: T) => [null, data])
      .catch<[U, undefined]>((err: U) => {
        if (errorExt) {
          const parsedError = Object.assign({}, err, errorExt)
          return [parsedError, undefined]
        }

        return [err, undefined]
      })
  }

  const handleSubmit = async () => {
    const { username, password } = loginFormModel.value
    if (username.trim() == "" || password.trim() == "") {
      return message.warning("用户名或密码不能为空！")
    }

    message.loading("登录中...", 0)
    loading.value = true
    console.log(loginFormModel.value)
    // params.password = md5(password)

    // const [err] = await to(userStore.login(loginFormModel.value))
    // if (err) {
    //   Modal.error({
    //     title: () => "提示",
    //     content: () => err.message,
    //   })
    //   updateCaptcha()
    // } else {}
    message.success("登录成功！")
    // setTimeout(() => router.replace((route.query.redirect as string) || "/"))
    router.push("/professor")
    loading.value = false
    message.destroy()
  }
</script>

<style lang="scss" scoped>
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding-top: 240px;
    background: url("@/assets/login.svg");
    background-size: 100%;

    .login-logo {
      display: flex;
      align-items: center;
      margin-bottom: 30px;

      .svg-icon {
        font-size: 48px;
      }
    }

    :deep(.ant-form) {
      width: 400px;

      .ant-col {
        width: 100%;
      }

      .ant-form-item-label {
        padding-right: 6px;
      }
    }
  }
</style>
